<template>
    <div class="drugs-container">
        <div class="left">
            <MyEcharts :option="option1" width="100%" height="50%" />
            <MyEcharts :option="option2" width="100%" height="50%" />
        </div>
        <div class="right">
            <MyEcharts :option="option3" width="100%" height="100%" />
        </div>
    </div>
</template>

<script>
import MyEcharts from '@/components/MyEcharts.vue';
import { api_infomationcenter_drugs } from "@/apis/informationCenter";
export default {
    components: { MyEcharts },
    data() {
        return {
            option1: {},
            option2: {},
            option3: {}
        }
    },
    created() {
        this.getDrugsInfo()
    },
    methods: {
        async getDrugsInfo() {
            let res = await api_infomationcenter_drugs()
            console.log(res.data);
            this.option1 = {
                title: {
                    text: "今日医疗器材库存",
                    left: "35%"
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: 'Pressure',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}'
                        },
                        data: [
                            {
                                value: (res.data.cursurplus * 100).toFixed(2),
                                name: 'SCORE'
                            }
                        ]
                    }
                ]
            }
            this.option2 = {
                title: {
                    text: "昨日医疗器材消耗排行",
                    left: "35%"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: res.data.yesterdayChart
                    }
                ]
            }


            let seriesData = res.data.weekChart.data.map(item => {
                return {
                    name: item.name,
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: item.data
                }
            })
            this.option3 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: res.data.weekChart.type
                },
                series:seriesData
            }
        }
    }
}
</script>

<style lang="less" scoped>
.drugs-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        flex: 2;
    }

    .right {
        flex: 3;
    }
}
</style>